<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title th:text="#{role.title.tip}"></title>
</head>
<body>
<!--页面标椎化-->
<div th:replace="common/common::html"></div>
<!--查询框-->
<div>
    <label sec:authorize="hasRole('ROLE_gqgy_data_role_query')" th:text="#{role.name}"></label>
    <input type="text" id="searchRoleName"/>
    <a sec:authorize="hasRole('ROLE_gqgy_data_role_query')" class="btn" href="#" onclick="queryBtn();">
        <i class="glyphicon glyphicon-zoom-in"></i>
        <span th:text="#{common.query}"></span>
    </a>
    <a class="btn" href="#" onclick="addBtn();">
        <i class="glyphicon glyphicon-plus"></i>
        <span th:text="#{common.add}"></span>
    </a>
    <a class="btn" href="#" onclick="updateBtn();">
        <i class="glyphicon glyphicon-edit"></i>
        <span th:text="#{common.modify}"></span>
    </a>
    <a class="btn" href="#" onclick="deleteBtn();">
        <i class="glyphicon glyphicon-edit"></i>
        <span th:text="#{common.delete}"></span>
    </a>
    <a sec:authorize="hasRole('ROLE_gqgy_data_role_query')" class="btn" href="#" id="allocate-btn">
        <i class="glyphicon glyphicon-tower"></i>
        <span th:text="#{role.menu.allocate}"></span>
    </a>
</div>
<!--展示数据的桌面-->
<table id="flexigrid-id" sec:authorize="hasRole('ROLE_gqgy_data_role_query')"></table>

<div id="dialog-id"></div>
<!--分配权限弹框-->
<div>
    <div id="allocate-role-dialog" style="display: none">
        <span th:text="#{role.menu.allocate}"></span>
        <ul id="allocate-role-ztree" class="ztree">
        </ul>
    </div>
</div>

<div id="add-role-dialog-id" style="display: none">
    <form id="add-role-form-id" th:action="@{roleAdd}" method="post">
        <span th:text="#{role.name}"></span>
        <input type="text" id="add-role-name" th:placeholder="#{role.name}"><br>
        <span th:text="#{role.remarks}"></span>
        <input type="text" id="add-role-remarks" th:placeholder="#{role.remarks}">
    </form>
</div>

<div id="update-role-dialog-id" style="display: none">
    <form id="update-role-form-id" th:action="@{roleAdd}" method="post">
        <span th:text="#{role.name}"></span>
        <input type="text" id="update-role-name" th:placeholder="#{role.name}"><br>
        <span th:text="#{role.remarks}"></span>
        <input type="text" id="update-role-remarks" th:placeholder="#{role.remarks}">
    </form>
</div>

<div>
    <div id="delete-role-dialog-id" style="display: none">
        <span th:text="#{role.del.info}"></span>
    </div>
</div>

</body>
<script th:inline="javascript">
    //全局变量
    var _gridWidth;
    var _gridHeight;
    var allocateSetting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    //页面自适应
    function resizePageSize() {
        _gridWidth = $(document).width() - 12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
        _gridHeight = $(document).height() - 32 - 140; /* -32 顶部主菜单高度，   -140 查询条件高度*/
    }

    //准备函数
    $(function () {
        resizePageSize();
        var _columnWidth = _gridWidth / 2;
        $("#flexigrid-id").flexigrid({
            width: _gridWidth,
            height: _gridHeight,
            url: /*[[@{/role/queryRoleListPage}]]*/"",
            dataType: 'json',
            colModel: [
                {display: 'roleUuid', name: 'roleUuid', width: 150, sortable: false, align: 'center', hide: 'true'},
                {
                    display: /*[[#{role.name}]]*/"",
                    name: 'roleName',
                    width: _columnWidth,
                    sortable: true,
                    align: 'center'
                },
                {
                    display:  /*[[#{role.remarks}]]*/"",
                    name: 'remarks',
                    width: _columnWidth,
                    sortable: true,
                    align: 'center'
                }
            ],
            resizable: false, //resizable table是否可伸缩
            useRp: true,
            usepager: true, //是否分页
            autoload: false, //自动加载，即第一次发起ajax请求
            hideOnSubmit: true, //是否在回调时显示遮盖
            showcheckbox: true, //是否显示多选框
            //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
            rowbinddata: true
        });
        $("#flexigrid-id").flexReload();

        // 分配角色权限
        $("#allocate-btn").click(function (event) {
            event.stopPropagation();
            ztree();
        });

        // 增加角色
        $("#add-role-dialog-id").click(function (event) {
            event.stopPropagation();
            addBtn();
        });

        // 修改角色信息
        $("#update-role-dialog-id").click(function (event) {
            event.stopPropagation();
            updateBtn();
        });

        // 删除角色信息
        $("#delete-role-dialog-id").click(function (event) {
            event.stopPropagation();
            deleteBtn();
        });

        $("#allocate-role-dialog").dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            title: /*[[#{role.menu.allocate}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function () {
                        var roleUUid = $("#allocate-role-ztree").attr("roleUuid");
                        var menuIds = [];
                        var ztreeObj = $.fn.zTree.getZTreeObj("allocate-role-ztree");
                        var nodes = ztreeObj.getCheckedNodes(true);
                        $(nodes).each(function (index, item) {
                            menuIds.push(item.id);
                        });
                        $.ajax({
                            type: 'post',
                            async: false,
                            dataType: 'json',
                            url: /*[[@{/role/saveMenuIdAndRoleId}]]*/'',
                            data: [{name: "roleUuid", value: roleUUid}, {name: "menuArray", value: menuIds}],
                            success: function (data) {
                                message(data.msg);
                                $("#allocate-role-dialog").dialog('close');
                            },
                            error: function (msg) {
                                message(/*[[#{common.error}]]*/'');
                            }
                        });
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });

        $("#add-role-dialog-id").dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            title: /*[[#{role.add}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function () {
                        var roleName = document.getElementById("add-role-name").value;
                        var remarks = document.getElementById("add-role-remarks").value;
                        $.ajax({
                            type: 'post',
                            async: false,
                            dataType: 'json',
                            url: /*[[@{/role/roleAdd}]]*/'',
                            data: [{name: "roleName", value: roleName}, {name: "remarks", value: remarks}],
                            success: function (data) {
                                message(data.msg);
                                $("#add-role-dialog-id").dialog('close');
                                $("#flexigrid-id").flexReload();
                            },
                            error: function (msg) {
                                message(/*[[#{common.error}]]*/'');
                            }
                        });
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });

        $("#update-role-dialog-id").dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            title: /*[[#{role.update}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function () {
                        var roleUUid =$("#flexigrid-id").flexiData();
                        var roleName = document.getElementById("update-role-name").value;
                        var remarks = document.getElementById("update-role-remarks").value;
                        $.ajax({
                            type: 'post',
                            async: false,
                            dataType: 'json',
                            url: /*[[@{/role/roleUpdate}]]*/'',
                            data: [{name: "roleUuid", value: roleUUid},{name: "roleName", value: roleName}, {name: "remarks", value: remarks}],
                            success: function (data) {
                                message(data.msg);
                                $("#update-role-dialog-id").dialog('close');
                                $("#flexigrid-id").flexReload();
                            },
                            error: function (msg) {
                                message(/*[[#{common.error}]]*/'');
                            }
                        });
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });


        $("#delete-role-dialog-id").dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            title: /*[[#{role.del.title}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function () {
                        var roleUUid =$("#flexigrid-id").flexiData();
                        // var roleName = document.getElementById("delete-role-name").value;
                        // var remarks = document.getElementById("delete-role-remarks").value;
                        $.ajax({
                            type: 'post',
                            async: false,
                            dataType: 'json',
                            url: /*[[@{roleDelete}]]*/'',
                            data: [{name: "roleUuid", value: roleUUid}],
                            success: function (data) {
                                message(data.msg);
                                $("#delete-role-dialog-id").dialog('close');
                                $("#flexigrid-id").flexReload();
                            },
                            error: function (msg) {
                                message(/*[[#{common.error}]]*/'');
                            }
                        });
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });

    });

    // 条件查询
    function queryBtn() {
        var searchRoleName = $("#searchRoleName").val();
        console.log(searchRoleName)
        $("#flexigrid-id").flexOptions({
            extParam: [
                {name: "searchRoleName", value: searchRoleName}
            ]
        }).flexReload();
    }

    // 增加角色
    function addBtn() {
        $("#add-role-dialog-id").dialog('open');
    }

    // 修改角色
    function updateBtn() {
        var ids = $("#flexigrid-id").flexiData();
        if (ids.length !== 1) {
            message(/*[[#{common.select.one}]]*/'');
            return;
        }
        $("#update-role-dialog-id").dialog('open');
    }

    // 删除角色
    function deleteBtn(roleUuid) {
        $("#delete-role-dialog-id").attr("roleUuid",roleUuid);
        $("#delete-role-dialog-id").dialog('open');
    }

    // 权限树
    function ztree() {
        var ids = $("#flexigrid-id").flexiData();
        if (ids.length !== 1) {
            message(/*[[#{common.select.one}]]*/'');
            return;
        }
        $("#allocate-role-ztree").attr("roleUUid", ids);

        $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/role/getMenuByRoleId}]]*/'',
                data: [{name: "roleUuid", value: ids}],
                success: function (data) {
                    $.fn.zTree.init($("#allocate-role-ztree"), allocateSetting, data);
                    $("#allocate-role-dialog").dialog('open');
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            }
        );
    }
</script>
</html>
